import 'package:bike_ride/common/mvvm/base_page.dart';
import 'package:bike_ride/common/util/format.dart';
import 'package:bike_ride/common/util/hysize_fit.dart';
import 'package:bike_ride/common/util/language.dart';
import 'package:bike_ride/common/util/model_utils.dart';
import 'package:bike_ride/common/widget/dialog/mydialog.dart';
import 'package:bike_ride/common/widget/error.dart';
import 'package:bike_ride/common/widget/page_title_widget.dart';
import 'package:bike_ride/generated/l10n.dart';
import 'package:bike_ride/model/wallet/model/recharge_arrow_m.dart';
import 'package:bike_ride/model/wallet/view_model/lately_recharge_vm.dart';
import 'package:bike_ride/res/IconFont.dart';
import 'package:bike_ride/res/style/color_styles.dart';
import 'package:bike_ride/res/style/text_styles.dart';
import 'package:bike_ride/res/style/theme_styles.dart';
import 'package:bike_ride/router/navigator_util.dart';
import 'package:bike_ride/router/routers.dart';
import 'package:flutter/material.dart';

///最近充值记录
class LatelyRechargeView extends BaseStatefulPage<LatelyRechargeViewModel> {
  const LatelyRechargeView({super.key});

  @override
  LatelyRechargeViewState createState() => LatelyRechargeViewState();
}

class LatelyRechargeViewState
    extends BaseStatefulPageState<LatelyRechargeView, LatelyRechargeViewModel> {

  @override
  void initAttribute() {}

  @override
  void initObserver() {}

  void notifyChange() {
    if (mounted) {
      setState(() {});
    }
  }

  @override
  LatelyRechargeViewModel viewBindingViewModel() {
    return LatelyRechargeViewModel()..viewState = this;
  }

  @override
  Widget appBuild(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: ColorStyles.color_F3F4F5,
      body: Column(
        children: [
          PageTitleWidget(title: S.current.myWallet),
          Padding(
            padding: EdgeInsets.symmetric(
                horizontal: ThemeStyles.pagePaddingHorizontal),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _buildContainer1(),
                SizedBox(height: 24.rpx,),
                Text(S.current.latelyRechargeRec,style: TextStyles.style_page_title,),
                SizedBox(height: 24.rpx,),

                viewModel!.rechargeArrowMList.isEmpty?
                  Center(
                    child: ErrorInfoWidget(
                      height: MediaQuery.of(context).size.height * 0.4,
                      retry: () => viewModel!.getRechargeArrowList(),
                    ),
                  ):
                  ListView.builder(
                    padding: EdgeInsets.zero,
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    itemCount: viewModel!.rechargeArrowMList.length,
                    itemBuilder: (context, index) {
                      final item = viewModel!.rechargeArrowMList[index];
                      return _Item(model: item,);
                    }
                  )

              ],
            ),
          ),
        ],
      ),
    );
  }
  Widget _buildContainer1() {
    return Container(
      width: MediaQuery.of(context).size.width -
          2 * ThemeStyles.pagePaddingHorizontal,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(24.rpx),
        gradient: LinearGradient(colors: [
          ColorStyles.color_gradient_start,
          Theme.of(context).colorScheme.primary,
        ]),
      ),
      child: Stack(
        children: [
          Column(
            children: [
              SizedBox(height: 24.rpx,),
              Text(
                S.current.walletBalance,
                style: TextStyle(
                    color: ColorStyles.color_FFFFFF,
                    fontSize: 28.rpx,
                    fontWeight: FontWeight.w500),
              ),
              SizedBox(height: 32.rpx,),
              Text(
                '${parseToMoney((viewModel!.discountStatM?.balanceAmount??0) +(viewModel!.discountStatM?.giftBalanceAmount??0))}',
                style: TextStyle(
                    color: ColorStyles.color_FFFFFF,
                    fontSize: 64.rpx,
                    fontWeight: FontWeight.bold),
              ),
              Container(
                constraints: BoxConstraints(minHeight: 72.rpx),
                color: ColorStyles.color_FFFFFF.withOpacity(0.14),
                padding: EdgeInsets.only(left: 32.rpx),
                margin: EdgeInsets.only(top: 46.rpx),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Text(
                          '${S.current.rechargeAmount}：${viewModel!.discountStatM?.balanceAmount??0}${S.current.yuan}',
                          style: TextStyle(
                              color: ColorStyles.color_FFFFFF,
                              fontSize: 28.rpx,
                              fontWeight: FontWeight.w500),
                        ),
                        const Spacer(),
                        if(Language.isZh)
                          _buildZhChild(),
                      ],
                    ),
                    if(!Language.isZh)
                      _buildZhChild(),
                  ],
                ),

              )
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildZhChild(){
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            '${S.current.giftAmount}：${parseToMoney(viewModel!.discountStatM?.giftBalanceAmount)}${S.current.yuan}',
            style: TextStyle(
                color: ColorStyles.color_FFFFFF,
                fontSize: 28.rpx,
                fontWeight: FontWeight.w500),
          ),
          Icon(
            Icons.help_outline_rounded,
            size: 28.rpx,
            color: ColorStyles.color_FFFFFF,
          )
        ],
      ),
      onTap: (){
        showAlertDialog(
          context: context,
          contentTxt: S.current.giftAmountDesc,
          hasCancel: false,
          confirmName: S.current.known,
          onConfirm: () {
            Navigator.of(context).pop();
          },
        );
      },
    );
  }

}

class _Item extends StatelessWidget {
  final RechargeArrowM model;
  const _Item({required this.model});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        NavigatorUtil.push(context, Routers.latelyRechargeInfoPage,arguments: model);
      },
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 16.rpx,horizontal: 28.rpx),
        margin: EdgeInsets.only(bottom: 16.rpx),
        decoration: BoxDecoration(
          color: ColorStyles.color_FFFFFF,
          borderRadius: BorderRadius.circular(16.rpx),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('${S.current.recharge}${model.amount}${S.current.yuan}',style: TextStyle(color: ColorStyles.color_333333,fontSize: 28.rpx),),
                SizedBox(height: 8.rpx,),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(Icons.access_time,size: 26.rpx,color: ColorStyles.color_999999,),
                    SizedBox(width: 8.rpx,),
                    Text(formatTimestamp(model.payTime),style: TextStyle(color: ColorStyles.color_999999,fontSize: 26.rpx),),
                  ],
                ),
              ],
            ),
            Icon(IconFont.iconjiantouyou,size: 36.rpx,color: ColorStyles.color_666666,),

          ],
        ),
      ),
    );
  }
}

